<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>주소 찾기</title>
<style type="text/css">
	span{
		text-decoration:underline;
		color:green;
		font-size:small;
	}
	table{
		font-size:small;
	}
	tr{
		height:30px;
	}
	th{
		background-color:#d6d4d4;
	}
</style>

<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		
		//이벤트 연결
		$('#searchForm').submit(function(event){
			
			var dong = $('#dong').val();
			if(dong == null || dong == ''){
				$('#search').html('<br>다시 검색해주세요.').css('color','red');
				$('#search').focus();
				return false;
			}
						
			//서버에서 데이터 전달하고 결과 데이터 요청
			$.getJSON('searchAddr.do',{dong:dong},function(data){
				
				var list = data.list;
				if(list == null){
					$('#search').html('다시 검색해주세요.').css('color','red');
				}
			});
		});
	}); 
	
	//우편번호,주소1 자동 넣기
	function setCode(code,addr1){
		opener.document.joinForm.zipcode.value=code;
		opener.document.joinForm.addr1.value=addr1;
		self.close();
	}

</script>
</head>
<body>

<form id="searchForm" method="post"><br>
	<input type="text" size="15" maxlength="15" name="dong" id="dong">
	<input type="submit" value="주소 찾기">
	<span id="guide"><b>동/읍/면 을 입력하세요!</b></span>
</form>

<div id="search"><br>
<table class="searchTable" >
	<tr>
		<th width="80">우편번호</th>
		<th width="450">주소</th>
	</tr>
	<c:forEach var="zipcodeList" items="${list}">
	<tr>
		<td width="70">
			<a href='javascript:void(0);' onclick="setCode('${zipcodeList.code}','${zipcodeList.sido} ${zipcodeList.gu} ${zipcodeList.dong} ${zipcodeList.ri} ${zipcodeList.dosu} ${zipcodeList.bunji} ${zipcodeList.bldg}');">${zipcodeList.code}</a>
		</td>
		<td>
			<a href='javascript:void(0);' onclick="setCode('${zipcodeList.code}','${zipcodeList.sido} ${zipcodeList.gu} ${zipcodeList.dong} ${zipcodeList.ri} ${zipcodeList.dosu} ${zipcodeList.bunji} ${zipcodeList.bldg}');">${zipcodeList.sido} ${zipcodeList.gu} ${zipcodeList.dong} ${zipcodeList.ri} ${zipcodeList.dosu} ${zipcodeList.bunji} ${zipcodeList.bldg}</a>
		</td>
	</tr>
	</c:forEach>
</table>
</div>

</body>
</html>